<template>
  <div class="app-container">
    <el-form  :model="queryForm" ref="queryForm"   v-show="showSearch" label-width="80px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="状态" prop="recordType">
            <el-select v-model="queryForm.recordType" placeholder="记录状态" clearable style="width: 240px">
              <el-option v-for="dict in recordTypes" :key="dict.code" :label="dict.codeName" :value="dict.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="用户名称" prop="recordType">
            <el-input v-model="queryForm.userName" placeholder="请输入用户名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="工资编号" prop="recordType">
            <el-input v-model="queryForm.salayNo" placeholder="请输入工资编号" clearable />
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
          <el-form-item label="归属店铺" prop="deptId">
            <treeselect v-model="queryForm.deptId" :options="deptOptions" :show-count="true"  placeholder="请选择归属部门" />
          </el-form-item>
          </el-col>

        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="tableList" border>
      <el-table-column prop="userName" label="用户名称" width="90"></el-table-column>
      <el-table-column label="状态" align="center" key="dataStts" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.salaryType==1" class="sp_price">计算失败</span>
          <span v-if="scope.row.salaryType==2" class="sp_price">代发工资</span>
          <span v-if="scope.row.salaryType==3" class="sp_price">待确认</span>
          <span v-if="scope.row.salaryType==4" class="sp_price">已确认呢</span>
          <span v-if="scope.row.salaryType==1" class="sp_price"
            style="font-style: 10px;color: red;">{{scope.row.errReason}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="salaryNo" label="工资编号" width="90"></el-table-column>
      <el-table-column prop="totalAmount" label="总金额" width="150">
        <template slot-scope="scope">
          <span class="sp_price">项目总金额:{{scope.row.totalAmount}}</span>
          <span class="sp_price">优惠总金额:{{scope.row.discountAmount}}</span>
          <span class="sp_price">收入总金额:{{scope.row.totalAmount - scope.row.discountAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectAmount" label="收费总信息" width="100">
        <template slot-scope="scope">
          <span class="sp_price">现金:{{scope.row.totalCashAmount}}</span>
          <span class="sp_price">电子:{{scope.row.totalCardAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectAmount" label="公司收费" width="100">
        <template slot-scope="scope">
          <span class="sp_price">现金:{{scope.row.companyCashAmount}}</span>
          <span class="sp_price">电子:{{scope.row.companyCardAmount}}</span>
          <span class="sp_price">总计:{{scope.row.companyCardAmount+scope.row.companyCashAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectAmount" label="技师收费" width="100">
        <template slot-scope="scope">
          <span class="sp_price">现金:{{scope.row.techCashAmount}}</span>
          <span class="sp_price">电子:{{scope.row.techCardAmount}}</span>
          <span class="sp_price">小费:{{scope.row.tipsCardAmount}}</span>
          <span class="sp_price">总计:{{scope.row.techCardAmount+scope.row.techCashAmount+scope.row.tipsCardAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectAmount" label="工资信息" width="100">
        <template slot-scope="scope">
          <span class="sp_price">总现金:{{scope.row.techCashAmount}}</span>
          <span class="sp_price">总电子:{{scope.row.techCardAmount + scope.row.tipsCardAmount}}</span>
          <span class="sp_price">总计额:{{scope.row.techCardAmount + scope.row.tipsCardAmount + scope.row.techCashAmount}}</span>
        </template>
      </el-table-column>

      <el-table-column label="修改时间" align="center" prop="modifyDate" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifyDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" v-show="scope.row.salaryType==1"
            @click="calculation(scope.row)">重新计算</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" v-show="scope.row.salaryType==2"
            @click="handSalary(scope.row)">发工资</el-button>
          <el-button size="mini" type="text" icon="el-icon-reading"
            @click="showSaleRecordModel(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
      @pagination="findPage" />

    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
      <el-table v-loading="loading" border :data="salarRecordList" ref="recordTable" :summary-method="getTotalRecord" show-summary>
        <el-table-column prop="id" label="订单号" width="250">
          <template slot-scope="scope">
            <span class="sp_price">订单号:{{scope.row.id}}</span>
            <span class="sp_price">创建时间:{{scope.row.createDate}}</span>
            <span class="sp_price">流水号:{{scope.row.cardRemark}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="技师名称" width="100"></el-table-column>
        <el-table-column prop="configName" label="项目名称" width="100"></el-table-column>
        <el-table-column label="状态" align="center" key="dataStts" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.recordType==1">待核查</span>
            <span v-if="scope.row.recordType==2">待发工资</span>
            <span v-if="scope.row.recordType==3">已发工资</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalDiscountAmount" label="项目信息" width="160">
          <template slot-scope="scope">
            <span class="sp_price">项目金额:{{scope.row.totalAmount}}</span>
            <span class="sp_price">技师分成比:{{scope.row.technicianRate}}%</span>
            <span class="sp_price">优惠总额:{{scope.row.discountAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalInputAmount" label="收费总信息" width="150">
          <template slot-scope="scope">
            <span class="sp_price" style="color: red;">现金:{{scope.row.totalCashAmount}}</span>
            <span class="sp_price">电子:{{scope.row.tipsCardAmount+scope.row.totalCardAmount}}</span>

          </template>
        </el-table-column>
        <el-table-column prop="totalTechAmount" label="技师分成" width="150">
          <template slot-scope="scope">
            <span class="sp_price" style="color: red;">现金:{{scope.row.techCashAmount}}</span>
            <span class="sp_price">电子:{{scope.row.techCardAmount}}</span>
             <span class="sp_price">小费:{{scope.row.tipsCardAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalCompanyAmount" label="公司分成" width="150">
          <template slot-scope="scope">
            <span class="sp_price" style="color: red;">现金:{{scope.row.companyCashAmount}}</span>
            <span class="sp_price">电子:{{scope.row.companyCardAmount}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="recordTotal>0" :total="recordTotal" :page.sync="salaryRecordReq.pageNum"
        :limit.sync="salaryRecordReq.pageSize" @pagination="querySaleRecordPage" />
    </el-dialog>
  </div>
  <!-- 添加或修改岗位对话框 -->

</template>

<script>
  import {
    findManagerPage,
    salarySend,
    recalculation
  } from "@/api/salary/salary";
  import {
    deptTreeSelect
  } from "@/api/system/user";
  import {
    findSalaryRecordPage
  } from "@/api/project/record";

  import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "salary",
    components: {
      Treeselect
    },
    data() {
      return {
        recordTypes: [{
            "code": -1,
            "codeName": "全部"
          },
          {
            "code": 1,
            "codeName": "计算失败"
          },
          {
            "code": 2,
            "codeName": "待发工资"
          },
          {
            "code": 3,
            "codeName": "待确认工资"
          },
          {
            "code": 4,
            "codeName": "已确认工资"
          }
        ],
        // 部门树选项
        deptOptions: [],
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          salaryType: -1,
          userName: null,
          salayNo: null
        },
        salaryRecordReq: {
          pageNum: 1,
          pageSize: 10,
          salaryId: null
        },
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        open: false,
        total: 0,
        tableList: [],
        lastRecord:{},
        recordTotal: 0,
        salarRecordList: [],
        // 是否展开，默认全部展开
        isExpandAll: true,
        // 重新渲染表格状态
        refreshTable: true,
        title: "工资记录"

      };
    },
    created() {

      this.getDeptTree();
    },
    methods: {
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(res => {
          this.deptOptions = res;
          this.queryForm.deptId= res[0].id;
          this.findPage();
        });
      },
      findPage() {
        findManagerPage(this.queryForm).then(res => {
          this.tableList = res.data;
          this.total = res.total;
          this.loading = false;
        })
      },
      handleQuery() {
        this.queryForm.pageNum = 1;
        this.findPage();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      handSalary(row) {
        let _this = this;
        this.$modal.confirm("确定要发" + row.userName + "的工资吗吗?").then(res => {
          salarySend({
            "salaryId": row.id
          }).then(res => {
            _this.$modal.msgSuccess("工资发放成功");
            _this.findPage();
          })
        })
      },
      showSaleRecordModel(row) {
        this.salaryRecordReq.salaryId = row.id;
        this.salaryRecordReq.pageNum = 1;
        this.querySaleRecordPage();
        this.open = true;
      },
      querySaleRecordPage() {
        this.lastRecord ={};
         this.salarRecordList = [];
        findSalaryRecordPage(this.salaryRecordReq).then(res => {
          if(null != res && res.data != null){
            let len = res.data.length;
            this.lastRecord = res.data[len-1];
            this.salarRecordList = res.data;
            this.salarRecordList.splice(len-1,1);
          }
          this.recordTotal = res.total;
        })
      },
      calculation(row) {
        recalculation({
          salaryId: row.id
        }).then(res => {
          this.$modal.msgSuccess("计算成");
          this.findPage();
        })
      },
      getTotalRecord(param){
        console.log(param);
        let totalArr =[];
        if(null != this.lastRecord && this.lastRecord.companyCardAmount >=0 && this.lastRecord.companyCashAmount>=0){
          totalArr[0] ="总计";
          totalArr[4] = <p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
              <div>项目总金额:{this.lastRecord.totalAmount}</div>
              <div>优惠总额:{this.lastRecord.discountAmount}</div>
              <div>收入金额:{(this.lastRecord.totalAmount-this.lastRecord.discountAmount).toFixed(1)}</div>
            </p>
          totalArr[5] = <p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
              <div style="color:red">现金总金额:{this.lastRecord.totalCashAmount}</div>
              <div>电子总金额:{(this.lastRecord.tipsCardAmount+this.lastRecord.tipsCardAmount).toFixed(1)}</div>
            </p>
          totalArr[6] =<p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
              <div style="color:red">现金总金额:{this.lastRecord.techCashAmount}</div>
              <div> 电子总金额:{this.lastRecord.techCardAmount}</div>
              <div>小费总金额:{this.lastRecord.tipsCardAmount}</div>
              <div>总计金额:{(this.lastRecord.tipsCardAmount+this.lastRecord.techCashAmount+this.lastRecord.techCardAmount).toFixed(1)}</div>
            </p>
          totalArr[7] = <p style="display: inline-block; margin-block-start: 0px;margin-block-end: 0px;">
              <div style="color:red">现金总金额:{this.lastRecord.companyCashAmount}</div>
              <div>电子总金额:{this.lastRecord.companyCardAmount}</div>
              <div>总计金额:{(this.lastRecord.companyCardAmount+this.lastRecord.companyCashAmount).toFixed(1)}</div>
              </p>
        }
        return totalArr;
      },
    }
  };
</script>
<style>
  .sp_price {
    display: list-item;
  }
</style>
